<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<style>
		#cas{
			display: block;
			border:1px solid;
			margin:auto;
		}
	</style>
	<script>
		window.onload = function(){
			canvas = document.getElementById("cas");
			context = canvas.getContext('2d');
			var sw = new stopWatch(canvas.width/2,canvas.height/2 , 150 , -0.5*Math.PI);
			sw.drawWatch();
			document.getElementById("startBtn").onclick = function(){
				var time;
				try{
					time = parseInt(document.getElementById('time').value);
				}
				catch(err){
					alert("格式错误");
					return;
				}
				sw.angle = Math.PI * time/30 - 0.5*Math.PI;
				sw.running = true;
				sw.drawWatch();
				sw.elapsed = 0;
				sw.start();
				animate();
				function animate(){
					if(sw.isRunning() && sw.getElapsedTime() <= time*1000){
						var t = sw.getElapsedTime();
						sw.angle =Math.PI * time/30 - (Math.PI * t/30000) - 0.5*Math.PI;
						sw.drawWatch();
						requestAnimationFrame(animate);
					}
				}
			}
		}

		function drawCircle(centerX , centerY , radius , fillStyle , strokeStyle){
			context.save();
			context.beginPath();
			context.arc(centerX , centerY , radius , 0 , 2*Math.PI);
			context.fillStyle = fillStyle;
			context.strokeStyle = strokeStyle;
			context.stroke();
			context.fill();
			context.restore();
		}

		function drawNum(centerX , centerY , radius){
			context.beginPath();
			context.textAlign = "center";
			context.textBaseline = "middle";
			var angle = 0;
			for(var i=0;i<12;i++){
				var newradius = radius-8;
				context.moveTo(centerX + radius* Math.cos(angle) , centerY + radius* Math.sin(angle));
				context.lineTo(centerX + newradius* Math.cos(angle) , centerY + newradius* Math.sin(angle));
				var text = i*5+15 >= 60? i*5-45 : i*5+15;
				context.fillText(text, centerX + (radius+40)* Math.cos(angle) , centerY + (radius+40)* Math.sin(angle))
				angle += Math.PI/30;
				for(var j=0;j<4;j++){
					newradius = radius-3;
					context.moveTo(centerX + radius* Math.cos(angle) , centerY + radius* Math.sin(angle));
					context.lineTo(centerX + newradius* Math.cos(angle) , centerY + newradius* Math.sin(angle));
					angle += Math.PI/30;
				}
			}
			context.stroke();
		}

		function drawPoint(centerX , centerY , radius , angle){
			context.beginPath();
			context.moveTo(centerX,centerY);
			context.lineTo(centerX + radius* Math.cos(angle) , centerY + radius* Math.sin(angle));
			context.stroke();
			drawCircle(centerX,centerY,10,"#ccc");
			drawCircle(centerX + radius* Math.cos(angle),centerY + radius* Math.sin(angle),5,"#ccc");
		}

		var stopWatch = function(centerX , centerY , radius , angle){
			this.x = centerX;
			this.y = centerY;
			this.radius = radius;
			this.angle = angle;
		}

		stopWatch.prototype = {
			startTime:0,
			running:false,
			elapsed:0,
			drawWatch:function(){
				context.clearRect(0,0,canvas.width , canvas.height);
				drawCircle(this.x , this.y , this.radius , "#ccc");
				drawCircle(this.x , this.y , this.radius-20 , "#FFF");
				drawNum(this.x , this.y , this.radius-20);
				drawPoint(this.x , this.y , (this.radius-10) , this.angle);
			},
			start:function(){
				this.startTime = +new Date();
				this.running = true;
			},
			stop:function(){
				this.elapsed = (+new Date()) - this.startTime;
				this.running = false;
			},
			isRunning:function(){
				return this.running;
			},
			getElapsedTime:function(){
				if(this.running){
					return (+new Date()) - this.startTime;
				}
				else {
					return this.elapsed;
				}
			}
		}

		window.requestNextAnimationFrame = (function(){
			return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function(callback , element){
				var self = this,start,finish;
				window.setTimeout(function(){
					start = +new Date();
					callback(start);
					finish = +new Date();
					self.timeout = 1000/60 - (finish - start)
				} , self.timeout)
			}
		});
	</script>
	<title>秒表</title>
</head>
<body>
	<div >
		<canvas id='cas' width="500" height="500">浏览器不支持canvas</canvas>
		<div style="width:100px;margin:10px auto">
			<input type="text" name="" id="time" style="width:40px;" value="50"><button id="startBtn">开始</button>
		</div>
	</div>
</body>
</html>